<template>
    <!--    <scroll-view class="scroll_index" :scroll-y="true"> -->
    <view class="scroll_index">
        <view class="shop_container">
            <view @click="handleDetail(item)" v-for="(item,index) in 10" :key="index" class="item">
                <view class="pic_coat">
                    <image src="../../static/shop_1_test.png" mode=""></image>
                </view>
                <view class="content">
                    <view class="line"></view>
                    <view class="name_container">
                        <view class="name">
                            苏菲
                        </view>
                        <view class="tips">
                            棉柔使用|日用
                        </view>
                    </view>
                    <view class="desc">
                        超熟睡420柔棉感 量多夜用纤巧棉柔 4片/包124234
                    </view>
                    <view class="content_price">
                        <view class="price">
                            ￥7.98
                        </view>
                        <view class="square">
                            +
                        </view>
                    </view>
                </view>
            </view>

        </view>
    </view>
    <!-- </scroll-view> -->
</template>

<script>
    export default {
        onReachBottom() {
            console.log("触底");
        },
        data() {
            return {

            };
        },
        methods: {
            handleDetail(item) {
                uni.navigateTo({
                    url: `/pages/index/detail?id=${item}`
                })
            }

        },

    }
</script>

<style scoped lang="scss">
    .scroll_index {
        height: 100%;

        .shop_container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;

            .item {
                padding: 20rpx;
                width: 48%;
                background-color: #fff;
                height: 480rpx;
                margin: 10rpx 0;
                border-radius: 20rpx;
                box-shadow: 0px 3px 3px #ccc;
                border-radius: 20rpx;


                .pic_coat {
                    width: 100%;
                    margin: 0 auto;
                    padding: 15rpx 30rpx;

                    image {
                        width: 100%;
                        background-color: skyblue;
                        height: 160rpx;
                    }
                }

                .content {
                    padding: 20rpx;

                    .line {
                        height: 1px;
                        width: 100%;
                        background-color: #ccc;
                    }

                    .name_container {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .name {
                            margin: 20rpx 0;
                            font-size: 34rpx;
                        }

                        .tips {
                            color: rgb(189, 189, 189);
                            font-size: 22rpx;
                        }
                    }


                    .desc {
                        font-size: 26rpx;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: normal;
                    }

                    .content_price {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        .price {
                            margin: 20rpx 0;
                            color: #FF0000;
                            font-size: 36rpx;
                            font-weight: bold;
                        }

                        .square {
                            height: 30rpx;
                            width: 30rpx;
                            line-height: 24rpx;
                            border: 1px solid #FF0000;
                            color: #FF0000;
                            text-align: center;
                            border-radius: 50%;
                        }
                    }

                }
            }


        }
    }
</style>